<template>
  <view class="index">
    <view class="center">
      <view class="ind_from">
        <view class="row">
          <view class="label">性别</view>
          <view class="value">
            <view
              class="pub_radio"
              :class="{ active: formData.gender == 1 }"
              @click="selectGender(1)"
              >男</view
            >
            <view
              class="pub_radio"
              :class="{ active: formData.gender == 0 }"
              @click="selectGender(0)"
              >女</view
            >
          </view>
        </view>
        <view class="row">
          <view class="label">年龄(岁)</view>
          <view class="value">
            <input
              class="input"
              v-model.number="formData.age"
              type="number"
              placeholder="请输入年龄"
            />
          </view>
        </view>
        <view class="row">
          <view class="label">血肌酐（μmol/L）</view>
          <view class="value">
            <input
              class="input"
              v-model.number="formData.scr"
              type="number"
              placeholder="请输入指数"
            />
          </view>
        </view>
      </view>
      <view class="btn" @click="submit">{{
        isUnlock ? "计算" : "看广告获取计算结果"
      }}</view>
      <view v-if="showResult" class="result">
        <div class="row">
          <view class="title">eGFR值</view>
          <view class="desc"
            ><text class="strong">{{ result.egfr.toFixed(2) }}</text
            ><text class="suffix">mL/min/1.73m²</text></view
          >
        </div>
        <div class="row">
          <view class="desc"
            ><text class="strong">{{ result.stage }}</text></view
          >
        </div>
      </view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adHomeBottom"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adKuaishouHomeBottom"></ad>
        <!-- #endif -->
      </view>
      <view class="refer">
        <view class="panel">
          <view class="label">说明：</view>
          <view
            >CKD-EPI计算公式（2009原版）：GFR=141* (min (Scr/k,1) a) * (max
            (Scr/k,1)*-1.209) * (0.993*Age) *1.018[if female]
            *1.159[ifblack];</view
          >
          <view
            >Scr表示血清肌酐水平，K=0.7（女性）或O.9（男性），a=-0.329（女性）或-0.411（男性），Age表示年龄；</view
          >
        </view>
        <view class="panel">
          <view class="label">参考文献：</view>
          <view
            >[1] Levey AS, et al. for the CKD-EPI (ChronicKidney Disease
            Epidemiology Collaboration) . ANew Equation to Estimate Glomerular
            FiltrationRate.2009 May 5; 150:604-612. PubMed ID:19414839[2] Inker
            L A , et al.New Creatinine- and Cystatin C-Based Equations to
            Estimate GFR without Race.</view
          >
          <view
            >[J].Massachusetts Medical
            Society,2021(19).DOI:10.1056/NEJMOA2102953.</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adUnitIdDouyinHomeBottom,
  adUnitIdKuaishouHomeBottom,
} from "@/common/ad";
import { globalData } from "@/enums/dataEnums";
export default {
  data() {
    return {
      adHomeBottom: adUnitIdDouyinHomeBottom,
      adKuaishouHomeBottom: adUnitIdKuaishouHomeBottom,
      showResult: false,
      isUnlock: false,
      formData: {
        gender: 1,
        unit: 1,
        age: "",
        scr: "",
      },
      result: {
        egfr: "",
        stage: "",
      },
    };
  },
  onLoad() {
    adVideoCreate();
  },
  methods: {
    selectGender(val) {
      this.formData.gender = val;
    },
    productionDateChange(e) {
      this.formData.productionDate = e.detail.value;
    },
    calculate() {
      let scrMgdl = this.formData.scr / 88.4;
      const k = this.formData.gender === 1 ? 0.9 : 0.7;
      const a = this.formData.gender === 1 ? -0.411 : -0.329;
      const scrRatio = scrMgdl / k;
      const minPart = Math.min(scrRatio, 1);
      const maxPart = Math.max(scrRatio, 1);
      const term = Math.pow(minPart, a) * Math.pow(maxPart, -1.209);
      this.result.egfr = 141 * term * Math.pow(0.993, this.formData.age);
      if (this.result.egfr >= 90) {
        this.result.stage = "慢性肾脏病1期";
      } else if (this.result.egfr >= 60) {
        this.result.stage = "慢性肾脏病2期";
      } else if (this.result.egfr >= 45) {
        this.result.stage = "慢性肾脏病3a期";
      } else if (this.result.egfr >= 30) {
        this.result.stage = "慢性肾脏病3b期";
      } else if (this.result.egfr >= 15) {
        this.result.stage = "慢性肾脏病4期";
      } else {
        this.result.stage = "慢性肾脏病5期";
      }
      this.showResult = true;
    },
    getResult() {
      this.calculate();
      this.isUnlock = true;
    },
    submit() {
      if (this.formData.age == "") {
        this.global.toast("请输入年龄");
        return;
      }
      if (
        !this.formData.age ||
        parseInt(this.formData.age) < 1 ||
        parseInt(this.formData.age > 120)
      ) {
        this.error = "请输入有效的年龄（1-120岁）";
        return;
      }
      if (this.formData.scr == "") {
        this.global.toast("请输入血肌酐");
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #f9f5ef;
  margin-top: 20rpx;
  border: 4rpx solid #b39569;
  border-radius: 10rpx;
  .row {
    padding: 16rpx 20rpx;
    display: flex;
    border-bottom: 1px solid #ccc;
    &:last-child {
      border-bottom: 0;
    }
    .label {
      width: 170px;
      flex-shrink: 0;
    }
    .value {
      width: 100%;
      .input {
        width: 100%;
      }
    }
    .pub_radio {
      display: inline-block;
      margin-right: 40rpx;
    }
  }
}
.btn {
  margin-top: 30rpx;
  background: #db0000;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .red {
    color: red;
  }
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}
.refer {
  font-size: 14px;
  color: #8e8e8e;
  padding: 10px 10px;

  .panel {
    margin-bottom: 10px;
    .label {
      margin-bottom: 5px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}
.result {
  background: #f9f5ef;
  margin-top: 10px;
  padding: 10px 10px;

  .left,
  .right {
    width: 100%;
    padding: 10px 10px;
    background: #6f6fff;
    color: #fff;
  }

  .left {
    margin-right: 10px;
  }

  .p {
    display: block;

    .strong {
      font-size: 30px;
      display: inline-block;
      margin-right: 6px;
    }
  }
  .suffix {
    font-size: 22px;
    color: #000;
  }

  .title {
    text-align: center;
    font-size: 30px;
  }
  .desc {
    font-size: 32px;
    text-align: center;
    color: #ff1afe;
  }
}
</style>